import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(() => ({
  root: {
    display: "flex",
    height: "100%",
    width: "100%",
  },
  chatSpace: {
    // backgroundColor: "red",
    display: "flex",
    width: "100%",
    justifyContent: "space-between",
    flexDirection: "column",
    padding: "1rem",
    color: (theme) => theme.palette.text.primary,
  },

  inputPlace: {
    display: "flex",
    width: "100%",
    flexDirection: "row",
    marginTop: "1rem",
  },

  inputPlaceInput: {
    fontSize: ".8rem",
  },

  buttonsContainer: {
    // backgroundColor: "green",
    display: "flex",
    padding: "0 1rem 0 1rem",
  },

  uploadedImageContainer: {
    // backgroundColor: "green",
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    padding: "0 .2rem 0 .2rem",
  },

  uploadedImage: {
    pointerEvents: "none",
    maxHeight: "1.5rem",
    maxWidth: "2rem",
  },

  attachButton: {
    // backgroundColor: "green",
  },

  sendButton: {
    // margin: ".7em",
  },

  chat: {
    // backgroundColor: "green",
    boxSizing: "border-box",
    width: "100%",
    height: "100%",
    padding: "0 1rem 0 1rem",
    overflow: "auto",
    // scrollbarColor: "red red !important",
  },

  message: {
    display: "flex",
    flexDirection: "column",
    margin: ".5rem 0 .5rem 0",
    padding: ".4rem",
    "&:hover": {
      background: (theme) => theme.palette.action.hover,
      borderRadius: "5px",
    },
  },

  messageInfoBox: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    margin: "0 0 .3rem 0",
    color: (theme) => theme.palette.text.secondary,
  },

  messageInfoBoxName: {
    fontSize: ".8rem",
  },

  messageInfoBoxDate: {
    fontSize: ".5rem",
    marginLeft: ".3rem",
  },

  messageText: {
    fontSize: ".75rem",
    overflowWrap: "anywhere",
  },

  messageImage: {
    maxWidth: "10rem",
    maxHeight: "20rem",
    margin: "0.3rem",
    "&:hover": {
      maxWidth: "20rem",
      maxHeight: "40rem",
    },
  },

  onlinePanel: {
    background: (theme) => theme.palette.grey[900],
    height: "100%",
    width: "12vw",
    padding: "0.7rem 0.5rem",
    "-webkitSoxSizing": "border-box",
    "-mozBoxSizing": "border-box",
    boxSizing: "border-box",
  },

  onlinePanelTitle: {
    color: (theme) => theme.palette.text.primary,
  },

  onlinePanelEntryBox: {
    margin: "0.4rem",
  },

  onlinePanelEntry: {
    color: (theme) => theme.palette.text.secondary,
    margin: "0.1rem 0rem",
    fontSize: "0.8rem",
  },
}));

export { useStyles };
